<template>
  <ContentWrap :body-style="{ padding: 0 }" class="border-none!">
    <el-row :gutter="10">
      <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="3">
        <div class="flex justify-center">
          <el-image :fit="'fill'" :src="spuItem.sku.picUrl || defaultProductImg" />
        </div>
      </el-col>
      <el-col :xs="17" :sm="17" :md="17" :lg="16" :xl="17">
        <div class="flex flex-col justify-between h-full p-y-5px">
          <div class="flex items-center">
            <el-text line-clamp="1" class="custom-text-18 c-[#11192d]! .dark:c-[#fff]!">
              <SpuTag
                :type="DICT_TYPE.PRODUCT_SPU_TYPE"
                :value="spuItemInfo.spuType"
                v-if="spuItemInfo.spuType && spuItemInfo.spuType != 2"
              />

              <SpuTag
                v-if="spuItemInfo.spuType == 2"
                class="mr-5px !h-full p-2px!"
                :type="DICT_TYPE.PRODUCT_SPU_TYPE2"
                :value="spuItemInfo.sku.skuType"
              />
              <!-- 是否赠送：sales（true|false）  -->
              <el-tag class="p-2px! !h-full !m-r-2px" v-if="isSales">赠品</el-tag>
              {{ spuItem.brandId }} {{ spuItem.spuName || spuItem.titleName }}
            </el-text>
          </div>

          <div class="custom-text-16 flex items-center">
            <!-- <el-text class="custom-text-16 c-[#11192d]! .dark:c-[#fff]!">
              ID: {{ spuItem.skuId }}</el-text
            > -->
            <!-- 零售单价:
            <el-text class="custom-text-16 c-[#11192d]! .dark:c-[#fff]!" tag="del">
              {{ fenToYuan(spuItem.price) }}元</el-text
            > -->

            <!-- <el-divider direction="vertical" /> -->
            <el-tag
              type="primary"
              class="custom-text-16"
              v-for="property in spuItem.properties"
              :key="property.propertyId"
            >
              {{ property.valueName }}
            </el-tag>
            <el-tag v-if="spuItemInfo.spuType == 2" class="custom-text-16 ml-5px">
              {{ filterCardAttributes(spuItemInfo.sku, true, true) }}
            </el-tag>
          </div>

          <div class="flex items-center">
            <slot name="extInfo"></slot>
          </div>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="flex !h-full justify-end">
          <slot name="itemButton"></slot>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts" name="spuItem">
import { onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
import { useProductUtils } from '@/views/mall/product/hooks/useProduct'
const { filterCardAttributes } = useProductUtils()
import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图

defineProps({
  // 选中的门店列表
  spuItem: propTypes.object.def({}),
  spuItemInfo: propTypes.object.def({}),
  isSales: propTypes.bool.def(false) //是否赠送
})

onMounted(() => {})
</script>
<style lang="scss" scoped>
:deep(.el-image) {
  border-radius: 4px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
:deep(.el-image__inner) {
  position: absolute !important;
}
</style>
